import styles from './index.module.less'
import cm from 'classnames'

const Index = (props) => {
  const { width = 20, strokeWidth = 1, className } = props
  const circumference = 2 * Math.PI * width
  const dashArray = `${circumference * 0.1} ${circumference}`
  const dashArray2 = `${circumference * 0.45} ${circumference}`
  const offset0 = `${-circumference * 0.175}`
  const offset1 = `${-circumference * 0.625}`
  return (
    <div className={cm(styles.svgBox, className)}>
      <svg className={styles.svg} viewBox={`0 0 ${width * 2} ${width * 2}`} width={width * 2}>
        <circle
          cx={width}
          cy={width}
          r={width - 2}
          strokeWidth={strokeWidth}
          style={{ '--oneDash': dashArray, '--twoDash': dashArray2, '--oneOff': offset0, '--twoOff': offset1 }}
        ></circle>
      </svg>
    </div>
  )
}

export default Index
